<template>
	<view class="guide_shell">
		<!-- 引导页面 -->
		 <u-swiper
		            :list="list1"
					@change="change"
					@click="none"
					:autoplay="false"
					:indicator="true"
					indicatorMode="dot"
		    ></u-swiper>
			<div class="skip_box" @click="skip()">
				{{countdown}}秒后进入,点击跳过
			</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer:null,
				clickover:false,
				countdown: 6,
				 list1: [
				                    '/static/people/guide.jpg',
				                    '/static/people/guide.jpg',
				                    '/static/people/guide.jpg',
				]
			}
		},
		mounted() {
		    this.startCountdown();
		  },
		methods: {
			startCountdown() {
			      this.timer = setInterval(() => {
			        if (this.countdown > 0) {
			          this.countdown--;
			        } else {
			          clearInterval(this.timer);
			          this.redirectToPage();
			        }
			      }, 1000);
			    },
				skip(){
					this.clickover = true;
					clearInterval(this.timer);
					uni.redirectTo({
						 url:'../login/login'
					}) // 
				},
				 redirectToPage() {
					 if(!this.clickover){
						 clearInterval(this.timer);
						// 在倒计时结束后自动跳转到指定页面
						uni.redirectTo({
							 url:'../login/login'
						}) // 需要确保vue-router已经正确配置
					 }else{
						 clearInterval(this.timer);
					 }
				    },
			change(){
				console.log('change')
			},
		}
	}
</script>

<style lang="scss" scoped>
.guide_shell{
	width: 100vw;
	// height: 100vh;
	// display: flex;
	// flex-direction: column;
	// justify-content: flex-start;
	// align-items: center;
}
::v-deep .u-swiper{
	width: 100vw !important;
	height: 100vh !important;
}
::v-deep .u-swiper__wrapper__item__wrapper{
	width: 100vw !important;
	height: 100vh !important;
}
::v-deep .u-swiper__wrapper{
	width: 100vw !important;
	height: 100vh !important;
}
::v-deep .u-swiper__wrapper__item__wrapper__image{
	width: 100vw !important;
	height: 100vh !important;
}
// .u-swiper__indicator{
// 	z-index: 100;
// 	bottom: 10vh !important; 
// }
.skip_box{
	width: 300rpx;
	height: 60rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 32rpx;
	right: 32rpx;
	color: white;
	border-radius:6rpx ;
}
</style>
